<template>
  <!-- 关联船舶 -->
  <el-dialog
    v-model="props.visible"
    width="1100px"
    :show-close="false"
    :close-on-click-modal="false"
    :before-close="handleClose"
  >
    <template #header="{ close, titleId, titleClass }">
      <div class="my-header">
        <h4
          :id="titleId"
          :class="titleClass"
        >
          {{ t('externalAssistance.AssociatedShip.title') }}
        </h4>
        <img
          src="@/assets/img/icon_guanbi.png"
          @click="close"
          class="close"
        />
      </div>
    </template>

    <!-- 船东、船管 -->
    <div
      v-if="sceneOne"
      class="sceneOne"
    >
      <div class="list">
        <div
          class="flexcc"
          v-if="!listData.length"
        >
          {{ t(`dockRepair.msg1`) }}
        </div>
        <ShippingInfo
          :data="item"
          hidetitle
          :class="['item', { active: activeId === item.id }]"
          v-for="item in listData"
          :key="item.id"
          @click="setActive(item)"
        />
      </div>

      <div class="flexcc mt-3">
        <el-pagination
          layout="prev, pager, next"
          :hide-on-single-page="total <= page.pageSize"
          :total="total"
          v-model:current-page="page.pageNum"
          :page-size="page.pageSize"
          @current-change="handleCurrentChange"
        >
        </el-pagination>
      </div>
    </div>

    <!-- 修船厂 -->
    <!-- <div v-if="sceneTwo"> -->
    <div
      v-if="sceneTwo"
      class="sceneTwo"
    >
      <div class="flexcc">{{ t('externalAssistance.AssociatedShip.t1') }}：</div>
      <el-form
        ref="formEl"
        :model="formData"
        :rules="rules"
        label-width=""
        class="demo-ruleForm mt-3"
        status-icon
      >
        <!-- 修船厂名称 -->
        <el-form-item
          label=""
          prop="shipRepairYardName"
        >
          <el-input
            v-model="formData.shipRepairYardName"
            :placeholder="t('externalAssistance.AssociatedShip.p1')"
          />
        </el-form-item>
        <!-- 修船厂所在国家 -->
        <el-form-item
          label=""
          prop="repairYardCountries"
        >
          <el-input
            v-model="formData.repairYardCountries"
            :placeholder="t('externalAssistance.AssociatedShip.p2')"
          />
        </el-form-item>
        <!-- 修船厂所在地区 -->
        <el-form-item
          label=""
          prop="repairYardArea"
        >
          <el-input
            v-model="formData.repairYardArea"
            :placeholder="t('externalAssistance.AssociatedShip.p3')"
          />
        </el-form-item>
      </el-form>
    </div>

    <template #footer>
      <div class="dialog-footer flexcc">
        <el-button
          color="#252628"
          plain
          @click="cancel"
        >
          {{ t('cancelText') }}
        </el-button>
        <el-button
          type="primary"
          color="#252628"
          @click="confirm"
        >
          {{ t('confirmText') }}
        </el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup>
import { ref, reactive, onBeforeMount, computed } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { useI18n } from 'vue-i18n'
import useExternalAssistance from '@/stores/externalAssistance.js'
import useLogin from '@/stores/login'
import { shippingListApi } from '@/service/shipping.js'
import { relationBoatApi } from '@/service/externalAssistance'
import useDict from '@/hooks/useDict'
const { dictData, getDictData, getDictLabel } = useDict()

const { t, locale } = useI18n()

const router = useRouter()
const route = useRoute()

const store = useExternalAssistance()
const { setOrderInfoKey } = store
const storeLogin = useLogin()

onBeforeMount(() => {
  init()
})

const props = defineProps({
  visible: {
    type: Boolean,
    default: false
  },
  // id
  shippingId: {
    type: Number,
    default: null
  },
  // 修船厂信息
  enterpriseInfo: {
    type: Object,
    default: () => null
  }
})

const emit = defineEmits(['close', 'getDetail'])

// 关闭
const handleClose = () => {
  emit('close')
}

// 取消
const cancel = () => {
  handleClose()
}
// 确定
const confirm = () => {
  const fun = (params) => {
    relationBoatApi(params).then(({ data, msg }) => {
      ElMessage.success(msg)
      setOrderInfoKey('id', data)
      emit('getDetail')
      handleClose()
    })
  }

  let params = {
    id: store.orderInfo.id, // 外协单id
    projectLargeId: store.category.outsourcingProjectId, // 大类id
    enterprisId: storeLogin.userInfo.enterpriseId // 所属企业
  }

  if (sceneOne.value) {
    if (!activeId.value) {
      ElMessage.warning(t('procurement.AssociatedShip.w1'))
      return
    }
    params.shippingId = activeId.value // 船舶id
    fun(params)
  }

  if (sceneTwo.value) {
    if (!formEl.value) return
    formEl.value.validate((valid, fields) => {
      if (valid) {
        params = {
          ...params,
          ...formData.value
        }
        fun(params)
      }
    })
  }
}

// 船舶列表
const listData = ref([])
const page = reactive({
  pageNum: 1, // 当前页码
  pageSize: 10 // 每页条数
})
const total = ref(0) // 总数
const activeId = ref(null) // 选中的船舶
if (props.shippingId !== null) {
  activeId.value = props.shippingId
}
const setActive = (item) => {
  const { id } = item
  activeId.value = id
}
// 获取数据
const getList = () => {
  shippingListApi({
    enterpriseId: storeLogin.userInfo.enterpriseId,
    ...page
  }).then(({ rows, total: t }) => {
    listData.value = rows
    total.value = t
  })
}
// 分页
const handleCurrentChange = (val) => {
  getList()
}

// 场景一
const sceneOne = computed(() => {
  return ['05', '06'].includes(storeLogin.userInfo.customerClassCode) // 船东、船管
})

// 场景二
const sceneTwo = computed(() => {
  return ['07'].includes(storeLogin.userInfo.customerClassCode) // 修船厂
})

// 表单
const formEl = ref(null)
const formData = ref({})
const rules = reactive({
  shipRepairYardName: [{ required: true, message: t('externalAssistance.AssociatedShip.r1'), trigger: 'blur' }],
  repairYardCountries: [{ required: true, message: t('externalAssistance.AssociatedShip.r2'), trigger: 'blur' }],
  repairYardArea: [{ required: true, message: t('externalAssistance.AssociatedShip.r3'), trigger: 'blur' }]
})
// 回显 - 默认带出
const { enterpriseName, enterpriseCountry, enterpriseAre } = props.enterpriseInfo
formData.value.shipRepairYardName = enterpriseName || storeLogin.userInfo.enterpriseName
formData.value.repairYardCountries = enterpriseCountry || storeLogin.userInfo.enterpriseCountry
formData.value.repairYardArea = enterpriseAre || storeLogin.userInfo.enterpriseAre

// init
const init = async () => {
  if (sceneOne.value) {
    getDictData('ships_type')
    getDictData('classification_society')
    getList()
  }
}
</script>

<style scoped lang="scss">
.sceneOne {
  height: calc(100vh - 380px);
  overflow: auto;
  .list {
    display: grid;
    // gap: 23px;
    > .item {
      background: #f5f5f5;
      padding: 28px;
      border: 4px solid #fff;
      cursor: pointer;

      &.active {
        border-color: var(--mainColor);
      }
    }
  }
}
.sceneTwo {
  padding: 0 130px;
}
</style>
